<template>
  <div class="trolleylitospop ">
      <div class="hoptospops">
          <div class="tosrdf">
              <div class="je">
                  <span class="iconfont icon-xiangzuo" @click="$router.go(-1)"></span>
              </div>
              <div class="en">
                  <span>详情</span>
              </div>
              <div class="je"></div>
          </div>
      </div>
       <div class="necoys">
           <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item) in gulisto.banner" :key="item.id">
                <div class="img">
                    <img v-lazy="item.picture" alt="">
                </div>
            </van-swipe-item>
           </van-swipe>
       </div>
       <div class="texnahto">
            <h3>{{gulisto.name}}</h3>
            <p class="puio">{{gulisto.title}}</p>
            <div class="cap">
                <div class="pe">{{gulisto.sales_volume}}</div>
                <div class="pr">{{gulisto.place_of_origin}}</div>
            </div>
            <div class="tuijianyu">
                <p>{{gulisto.title}}</p>
            </div>
            <div class="xuanmin">
                <div class="vanbuttonsto" @click="gou">
                   <div class="left">
                       <span>已选 &nbsp;</span><span>{{gulisto.sto}}</span><span>&nbsp;数量:{{gulisto.num}}</span>
                   </div>
                  <span class="iconfont icon-right-1-copy"></span>
                </div>
            </div>
            <div class="xiangmaxti">
                <div class="vanbuttonsto" >
                   <div class="left">
                       <span>评价晒单</span><span>{{gulisto.evaluate}}</span>
                   </div>
                  <span class="iconfont icon-right-1-copy"></span>
                </div>
                <div class="tuwenxiang">

                </div>
            </div>
            <div class="bottonas">
                <van-goods-action>
                    <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
                    <van-goods-action-icon icon="cart-o" text="购物车" :badge="nuot" @click="gotoca" />
                    <van-goods-action-button type="warning" text="加入购物车" @click="onAddCart" />
                    <van-goods-action-button type="danger" text="立即购买" @click="onBuyphy" />
                </van-goods-action>
            </div>
            <van-sku
            v-model="show"
            :sku="sku"
            :goods="goods"
            :goods-id="goodsId"
            :initialSku="initialSku"
            @buy-clicked="onBuyClickedto"
            @add-cart="onAddCartClickedto"
            @sku-selected='skuSelected'
            @stepper-change='stepperChange'
            />
       </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Swipe, SwipeItem ,GoodsAction, GoodsActionIcon, GoodsActionButton,Sku,Lazyload } from 'vant';
Vue.use(Swipe);
Vue.use(SwipeItem)
Vue.use(Sku);
Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);
Vue.use(Lazyload);
export default {
    data(){
        return{
            nerlsit:[
                "https://i1.douguo.com/upload/tuan/e/8/c/e8592bde23419e3e3f8fbec334d3adac.jpg",
                "https://i1.douguo.com/upload/tuan/9/a/7/9a90de5edb8c11f3542e523537dc9b57.jpg",
                "https://i1.douguo.com/upload/tuan/6/5/3/65222ddd98272c6f378b6600aa828093.jpg",
            ],
            show:false,
            goodsId:null,
            onBuyClicked:"立即购买",
            onAddCartClicked:"加入购物车",
            nuot:0,
            //商品数据
            gulisto:{
                // price:45,
                // num:5,
                // goodsId_img:'https://i1.douguo.com/upload/tuan/6/5/3/65222ddd98272c6f378b6600aa828093.jpg',
                // name:"出口级微霜流心枯露柿饼2斤礼盒（独立包装）",
                // title:"【收到后冷藏或冷冻】",
                // sto:"大盒",
                // goodsId:2259,
                // banner:[
                //     {
                //        name:"出口级微霜流心枯露柿饼2斤礼盒（独立包装）",
                //        id:2260,
                //        picture:"https://i1.douguo.com/upload/tuan/e/8/c/e8592bde23419e3e3f8fbec334d3adac.jpg"
                //     },
                //      {
                //        name:"出口级微霜流心枯露柿饼2斤礼盒（独立包装）",
                //        id:2261,
                //        picture:"https://i1.douguo.com/upload/tuan/9/a/7/9a90de5edb8c11f3542e523537dc9b57.jpg"
                //     },
                //      {
                //        name:"出口级微霜流心枯露柿饼2斤礼盒（独立包装）",
                //        id:2259,
                //        picture:"https://i1.douguo.com/upload/tuan/6/5/3/65222ddd98272c6f378b6600aa828093.jpg"
                //     },
                // ],
                // place_of_origin:"山东",
                // sales_volume:"月售307",
                // evaluate:"12"

            },
            sku: {
                // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
                // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
                tree: [
                    {
                    k: '颜色', // skuKeyName：规格类目名称
                    k_s:'s2', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
                    v: [
                        {
                        id: '1', // skuValueId：规格值 id
                        name: '红色', // skuValueName：规格值名称
                        imgUrl: 'https://i1.douguo.com/upload/tuan/6/5/3/65222ddd98272c6f378b6600aa828093.jpg', // 规格类目图片，只有第一个规格类目可以定义图片
                        },
                        {
                        id: '2',
                        name: '蓝色',
                        imgUrl: 'https://i1.douguo.com/upload/tuan/6/5/3/65222ddd98272c6f378b6600aa828093.jpg',
                        }
                    ],
                    largeImageMode: false, //  是否展示大图模式
                    }
                ],
                // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
                list: [
                    {
                    id: 2259, // skuId
                    s1: '1', // 规格类目 k_s 为 s1 的对应规格值 id
                    s2: '1', // 规格类目 k_s 为 s1 的对应规格值 id
                    price: 1600, // 价格（单位分）
                    stock_num: 110 // 当前 sku 组合对应的库存
                    },
                    {
                    id: 2259, // skuId
                    s1: '2', // 规格类目 k_s 为 s2 的对应规格值 id
                    s2: '2', // 规格类目 k_s 为 s2 的对应规格值 id
                    price: 2600, // 价格（单位分）
                    stock_num: 110 // 当前 sku 组合对应的库存
                    }
                ],
                price: '45.00', // 默认价格（单位元）
                stock_num: 227, // 商品总库存
                collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
                none_sku: false, // 是否无规格商品
                messages: [
                    {
                        // 商品留言
                        datetime: '0', // 留言类型为 time 时，是否含日期。'1' 表示包含
                        multiple: '0', // 留言类型为 text 时，是否多行文本。'1' 表示多行
                        name: '留言', // 留言名称
                        type: 'text', // 留言类型，可选: id_no（身份证）, text, tel, date, time, email
                        required: '0', // 是否必填 '1' 表示必填
                        placeholder: '', // 可选值，占位文本
                        extraDesc: ''  // 可选值，附加描述文案
                    }
                ],
                hide_stock: true// 是否隐藏剩余库存
            },
            goods: {
                 // 数据结构见下方文档
                 // 默认商品 sku 缩略图
                 picture: 'https://i1.douguo.com/upload/tuan/6/5/3/65222ddd98272c6f378b6600aa828093.jpg'
            },
            initialSku:{
                // 键：skuKeyStr（sku 组合列表中当前类目对应的 key 值）
                // 值：skuValueId（规格值 id）
                s1: '1',
                s2: '2',
                // 初始选中数量
                selectedNum: 2,
                // 初始选中的商品属性
                // 键：属性id
                // 值：属性值id列表
                selectedProp: {
                    list: ['s1',"s2"]
                }
            },
            gouwuche:null
        }
    },
    methods:{
        gou(){
            console.log("123")
            this.show=true;
        },
        skuSelected(data){
            console.log("规格",data)
            this.gulisto.sto = data.skuValue.name;
            // console.log("6789")
        },
        getbugoodsdata(){
            let goodsdata = JSON.parse(sessionStorage.getItem('goodsdata'));//取数据
            console.log("列表进",goodsdata);
        },
        onAddCart(){
            // console.log("加入购物车")
            let data = {
                name:this.gulisto.name,
                goodsId_img:this.gulisto.goodsId_img,
                title:this.gulisto.title,
                goodsId:this.gulisto.goodsId,
                sto:this.gulisto.sto,
                price:this.gulisto.price,
                num:this.gulisto.num
            }
            let shpinglist = JSON.parse(sessionStorage.getItem('shpinglist'));//取数据
            if(shpinglist){
                
                if(shpinglist.findIndex(item=>item.goodsId == data.goodsId) != -1){
                    let index = shpinglist.findIndex(item=>item.goodsId == data.goodsId);
                    // console.log()
                    shpinglist[index].num +=data.num;
                    console.log(shpinglist[index])
                    let shpinglistto = shpinglist;
                    window.sessionStorage.setItem('shpinglist',JSON.stringify(shpinglistto));//存数据
                   
                }else{
                    shpinglist.push(data);
                    window.sessionStorage.setItem('shpinglist',JSON.stringify(shpinglist));//存数据
                }
                    
            
            }else{
                let shpinglist =[];
                shpinglist.push(data);
                window.sessionStorage.setItem('shpinglist',JSON.stringify(shpinglist));//存数据
                console.log("无数组",shpinglist)
            }
            this.getcadrdfan();
            // this.nuot += 1 ;
        },
        onBuyphy(){
            console.log("立即购买")
             let data = {
                name:this.gulisto.name,
                goodsId_img:this.gulisto.goodsId_img,
                title:this.gulisto.title,
                goodsId:this.gulisto.goodsId,
                sto:this.gulisto.sto,
                price:this.gulisto.price,
                num:this.gulisto.num
            }
            let  onBuyphy = data
            window.sessionStorage.setItem('onBuyphy',JSON.stringify(onBuyphy));//存数据
            this.$router.push('/cardgoto');
        },
        gotoca(){
            let shpinglist = JSON.parse(sessionStorage.getItem('shpinglist'));//取数据
            if(shpinglist){
                this.$router.push('/cardgoto');
                console.log(shpinglist)
            }else{
                console.log("请选择商品规格")
            }
            
        },
        getcadrdfan(){
            let shpinglist = JSON.parse(sessionStorage.getItem('shpinglist'));//取数据
            if(shpinglist){
                this.nuot = shpinglist.length;
            }else{
                this.nuot = 0
            }
        },
        getgoss(){
            console.log("传",this.$route.params.data)
            if(this.$route.params.data){
                let goodsdata = this.$route.params.data;
                let goodsdatato = new Set([goodsdata])
                for (let e of goodsdatato) {
                    let {name,goodsId,price,num,
                      goodsId_img,title,sto,banner,
                     place_of_origin,sales_volume,evaluate,sku,goods} =e;
                    let data = {
                        name:name,
                        goodsId:goodsId,
                        price:price,
                        num:num,
                        goodsId_img:goodsId_img,
                        title:title,
                        sto:sto,
                        banner:banner,
                        place_of_origin:place_of_origin,
                        sales_volume:sales_volume,
                        evaluate:evaluate,
                        sku:sku,
                        goods:goods
                    } 
                    this.gulisto =data;
                     this.sku=data.sku;
                     this.goodsId=data.goodsId;
                    // console.log(this.sku)
                    this.goods= data.goods;
                    // console.log(this.goods)  
                    console.log("goodsdata",data)
                }
            }else{
                let goodsdata = JSON.parse(sessionStorage.getItem('goodsdata'));//取数据
                let goodsdatato = new Set([goodsdata])
                for (let e of goodsdatato) {
                    let {name,goodsId,price,num,
                      goodsId_img,title,sto,banner,
                     place_of_origin,sales_volume,evaluate,sku,goods} =e;
                    let data = {
                        name:name,
                        goodsId:goodsId,
                        price:price,
                        num:num,
                        goodsId_img:goodsId_img,
                        title:title,
                        sto:sto,
                        banner:banner,
                        place_of_origin:place_of_origin,
                        sales_volume:sales_volume,
                        evaluate:evaluate,
                        sku:sku,
                        goods:goods
                    } 
                    this.gulisto = data;  
                    console.log("goodsdatawindows",data)
                    this.sku=data.sku;
                    this.goodsId=data.goodsId;
                    // console.log(this.sku)
                    this.goods= data.goods;
                    // console.log(this.goods)
                }
                
            }
        },
        onAddCartClickedto(data){
            // console.log(data)
            // this.skuSelected();
            // this.onAddCart(selectedSkuComb.price);
            this.gulisto.price=data.selectedSkuComb.price/100;
            this.gulisto.sto = data.selectedSkuComb.name;
            this.gulisto.num = data.selectedNum;
            // console.log( this.gulisto);
            this.onAddCart();
        },
        onBuyClickedto(data){
            console.log("立即购买",data)
            this.gulisto.price=data.selectedSkuComb.price/100;
            this.gulisto.sto = data.selectedSkuComb.name;
            this.gulisto.num = data.selectedNum;
            this.onBuyphy();
        },
        stepperChange(skuValue){
             console.log(skuValue)
             this.gulisto.num = skuValue;
        }
        
    },
    created(){
        this.getcadrdfan()
        this.getgoss();
    },
    updated(){

    },
    watch:{
    },
    
}
</script>

<style lang="less">
    .trolleylitospop{
        width: 100%;
        height: 100%;
        padding-bottom: 70px;
        position: relative;
        background-color: #fff;
        z-index: 40;
        .hoptospops{
            width: 100%;
            height: 40px;
            background-color: #fff;
            // position: relative;
            .tosrdf{
                width: 100%;
                height: 40px;
                position: fixed;
                background-color: #fff;
                color: #323232;
                z-index: 10;
                top: 0;
                left: 0;
                padding: 10px;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                .je{
                    width: 10%;
                    height: 100%;
                    text-align: left;
                    line-height: 20px;
                    span{
                        font-size: 20px;
                    }
                }
                .en{
                    width: 20%;
                    height: 100%;
                    text-align: center;
                    line-height: 20px;
                    font-size: 16px;
                }
                .je{
                    width: 10%;
                    height: 100%;
                }
            }
        }
        .necoys{
            width: 100%;
            overflow: hidden;
            .img{
                width: 100%;
                img{
                    width: 100%;
                }
            }
        }
        .texnahto{
            width: 100%;
            margin-top: 10px;
            background-color: #f3f2f0;
            h3{
                font-size: 16px;
                padding: 10px 10px 7px;
                line-height: 23px;
                font-weight: bold;
                background-color: #fff;
            }
            .puio{
                font-size: 14px;
                line-height: 20px;
                // margin: 0 10px;
                padding-left: 10px;
                padding-right: 10px;
                box-sizing: border-box;
                color: #666;
                background-color: #fff;
            }
            .cap{
                font-size: 12px;
                background: #fff;
                width: 100%;
                height: 32px;
                border-top: 1px solid #f3f2f0;
                border-bottom: 1px solid #f3f2f0;
                padding: 0 10px;
                color: #666;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                .pe{
                    width: 30%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    span{
                        font-size: 12px;
                    }
                }
                .pr{
                    width: 30%;
                    height: 100%;
                    display: flex;
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    span{
                        font-size: 12px;
                    }
                }
            }
            .tuijianyu{
                margin-top: 10px;
                width: 100%;
                margin-bottom: 10px;
                color: #323232;
                font-size: 14px;
                
                p{
                    background: #fff;
                    padding: 10px;
                    line-height: 24px;
                    letter-spacing: 0.8px;
                }

            }
            .xuanmin{
                width: 100%;
                .vanbuttonsto{
                   margin-top: 1px;
                   background-color: #fff;
                   width: 100%;
                   height: 40px;
                   padding-left: 10px;
                   padding-right: 10px;
                   box-sizing: border-box;
                   display: flex;
                   justify-content: space-between;
                   align-items: center;
                   .left{
                       display: flex;
                       font-size: 14px;
                       color: #666;
                       align-items: center;
                   }
                   span.iconfont{
                       font-size: 14px;
                       color: #666;
                   }
                }
            }
            .xiangmaxti{
                width: 100%;
                margin-top: 10px;
                
                 .vanbuttonsto{
                   margin-top: 1px;
                   background-color: #fff;
                   width: 100%;
                   height: 40px;
                   padding-left: 10px;
                   padding-right: 10px;
                   box-sizing: border-box;
                   display: flex;
                   justify-content: space-between;
                   align-items: center;
                   .left{
                       display: flex;
                       font-size: 14px;
                       color: #666;
                       align-items: center;
                   }
                   span.iconfont{
                       font-size: 14px;
                       color: #666;
                   }
                }
                .tuwenxiang{
                    width: 100%;
                }
            }
        }
        .bottonas{
            width: 100%;
            padding-left: 10px;
            padding-right: 10px;
            box-sizing: border-box;
        }
    }
</style>